<template>
    <div class="outSideContainer">
        <div class="page_title">
            历史查询
        </div>
        <div class="container">

            <!-- F1选择器和输入框 -->
            <div class="selector">
                <span>入住时间：</span>
                <Date-picker type="date" placeholder="选择日期" @on-change="_selectedLiveTime"
                             style="width: 150px;"></Date-picker>
                <span>退房时间：</span>
                <Date-picker type="date" placeholder="选择日期" @on-change="_selectedLeaveTime"
                             style="width: 150px;"></Date-picker>
                <span>房型：</span>
                <Select style="width: 150px" clearable @on-change="_selectedRoomPart">
                    <Option
                        v-for="(item,index) in getSingleRoomPartOption"
                        :value="item"
                        :key="index"
                    >{{ item }}
                    </Option>
                </Select>
                <div style="width: 30px"></div>
                <!-- F1-1 输入框 -->
                <span>请输入房号：</span>
                <Input v-model="roomNum" clearable placeholder="请输入房号" style="width: 150px"></Input>
                <span>请输入姓名：</span>
                <Input v-model="geustName" clearable placeholder="请输入姓名" style="width: 150px"></Input>
                <span>请输入身份证：</span>
                <Input v-model="geustId" clearable placeholder="请输入身份证" style="width: 150px"></Input>
                <Button style="margin-left:10px;" type="primary" icon='ios-search'
                        @click="_goSearch">查询
                </Button>
                <!-- F1-1 输入框结束 -->
            </div>
            <!-- F1 结束 -->

            <!-- F2 表格 -->
            <div class="table">
                <Table v-if="this.notLoading" stripe :columns="columns" :data="historyList"></Table>
                <div  v-else style="text-align: center">
                    <Spin class="loading" size="small"></Spin>
                    <Spin class="loading"></Spin>
                    <Spin class="loading" size="large"></Spin>
                    <h2 style="color: #54a1f1">数据加载中....</h2>
                </div>
                <!-- F2-1 分页器 -->
                <div class="pagination">
                    <Page style="user-select: none" :page-size="pages.pageSize*1" :total="Number(pages.total)" @on-change="_changePage" show-elevator  show-total ></Page>
                </div>
                <!-- F2-1 分页器结束 -->
            </div>
            <!-- F2 表格结束 -->
        </div>

    </div>
</template>

<script>
export default {
    name: "history-list",
    data() {
        return {
            columns: [
                {
                    title: "房号",
                    key: "roomNum",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "姓名",
                    key: "personName",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "身份证",
                    key: "idCard",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "房型",
                    key: "roomPart",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "入住时间",
                    key: "liveTime",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "退房时间",
                    key: "leaveTime",
                    align:'center',
                    sortable: true,
                },
                {
                    title: "入住天数",
                    key: "stayTime",
                    align:'center',
                    sortable: true,
                },
            ],
            historyList: [],
            //搜索房间号
            roomNum: '',
            //搜索的姓名
            geustName: '',
            //搜索的身份证
            geustId: '',
            //是否加载中
            notLoading:false,
            pages: {
                page: '1',
                pageSize: '12',
                total: '',
                kw:'',
                liveTime: '',
                leaveTime: '',
                roomPart: '',
                roomNum:'',
                name:'',
                idCard: '',

            },
        };
    },
    methods: {
        //历史查询接口
        queryHistory(page,liveTime, leaveTime, roomPart, roomNum, personName, idCard) {
            let params = {
                adminId: window.$localStorage.getItem("adminId"),
                pageSize: this.pages.pageSize,
                page,
                liveTime,
                leaveTime,
                roomPart,
                roomNum,
                personName,
                idCard,
            }
            console.log('============',params)
            this.$http.post('/room/queryCheckInHistory', this.common.request(params)).then(res => {
                console.log(res)
                if (res.data.code == 200) {
                    this.pages.total = res.data.data.total
                    res.data.data.list.forEach(item => {
                        let liveTime = item.liveTime.replace(/-/g,'/')
                        liveTime = new Date(liveTime).getTime()
                        let leaveTime = item.leaveTime.replace(/-/g,'/')
                        leaveTime = new Date(leaveTime).getTime()
                        let stayTime = new Date(leaveTime - liveTime).getDate() + '天'
                        if (leaveTime - liveTime < 0 || item.liveTime === null) {
                            item.stayTime = '未知'
                        } else {
                             item.stayTime = stayTime
                        }

                        //console.log('每个房间入住的天数：',stayTime)
                        //console.log('每个房间的入住时间---时间戳格式：',liveTime)
                    })
                    this.historyList = res.data.data.list
                } else {
                    this.open(res.data.msg)
                }
            })
        },
        //点击页数
        _changePage(value) {
            if(this.pages.kw=='入住时间'){
                this.queryHistory(value,this.pages.liveTime)
                return
            }else if(this.pages.kw=='退房时间'){
                this.queryHistory(value,'',this.pages.leaveTime)
                return;
            }else if(this.pages.kw =='选择房型'){
                console.log('当前是查询的房型:'+this.pages.roomPart,'是第：',value,'页')
                this.queryHistory(value,'','',this.pages.roomPart)
                return;
            }else if(this.pages.kw == '房间号查询'){
                this.queryHistory(value,'','','',this.roomNum)
                return;
            }else if(this.pages.kw == '名字查询'){
                this.queryHistory(value,'','','','',this.geustName)
                return;
            }else if(this.pages.kw == '身份证查询'){
                this.queryHistory(value,'','','','','',this.geustId)
                return;
            }
            this.queryHistory(value)
        },
        //选择入住时间
        _selectedLiveTime(liveTime) {
            console.log('这是入住时间：', liveTime)
            this.pages.kw = '入住时间'
            this.pages.liveTime = liveTime
            this.queryHistory(1,liveTime, '', '', '', '', '')
        },
        //选择退房时间
        _selectedLeaveTime(leaveTime) {
            console.log('这是退房时间：', leaveTime)
            this.pages.kw = '退房时间'
            this.pages.leaveTime = leaveTime
            this.queryHistory(1,'', leaveTime, '', '', '', '')
        },
        //选择房型
        _selectedRoomPart(roomPart) {
            console.log('当前选择的房型是：', roomPart)
            this.pages.kw = '选择房型'
            this.pages.roomPart = roomPart
            this.pages.page = 1
            this.queryHistory(1, '', '',roomPart, '', '', '')
        },
        //点击查询按钮
        _goSearch() {
            if (!this.geustId && !this.geustName && !this.roomNum) {
                this.open('请输入身份证号或名字或房间号')
                return
            }
            if ((this.geustId && this.geustName) || (this.geustName && this.roomNum) || (this.geustId && this.roomNum)) {
                this.open('请清除其他俩项条件')
                return
            }

            if (this.geustId != '' && this.geustName == '' && this.roomNum == '') {
                this.pages.kw = '身份证查询'
                this.pages.idCard = this.geustId
                this.queryHistory(1, '', '', '', '','', this.geustId)
            }

            if (this.geustId == '' && this.geustName != '' && this.roomNum == '') {
                this.geustName.trim()
                this.pages.kw = '名字查询'
                this.pages.name = this.geustName
                this.queryHistory(1, '', '', '','', this.geustName, '')
            }
            if (this.geustId == '' && this.geustName == '' && this.roomNum != '') {
                this.pages.kw ='房间号查询'
                this.pages.roomNum = this.roomNum
                this.queryHistory(1, '', '','', this.roomNum, '', '',)
            }


        },
        //提示
        open(nodesc) {
            this.$Notice.open({
                title: "提示！",
                desc: nodesc,
            });
        },
    },
    mounted() {
        this.queryHistory(1)
    },
    watch: {
        roomNum(newVal, oldVal) {
            if (newVal == '') {
                this.queryHistory(1)
            }
        },
        geustName(newVal, oldVal) {
            if (newVal == '') {
                this.queryHistory(1)
            }
        },
        geustId(newVal, oldVal) {
            if (newVal == '') {
                this.queryHistory(1)
            }
        },
        historyList(newValue, oldValue) {
            if(newValue.length>0){
                this.notLoading = true
            }
        }

    },
    computed: {
        //房型选择
        getSingleRoomPartOption() {
            let roomPartOption = [];
            this.historyList.forEach(item => {
                roomPartOption.push(item.roomPart)
            })
            let option = [...new Set(roomPartOption)]
            return option
        },
    },
};
</script>

<style lang="less" scoped>
.outSideContainer{
    box-shadow: 0 0 4px 0 #aaaaaa;
}
.container{
    background-color: #FFFFFF;
    padding: 10px;

}
.page_title{
    border-radius: 2px;
    background-color: #ffffff;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    user-select: none;
    padding: 10px;
    border-bottom: 1px solid #ebecf0;
}
.selector {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    span {
        margin-left: 5px;
    }
}

.table {
    background-color: #ffff;
    .loading{
        display: inline-block;
        padding: 20px;
    }
    .pagination {
        padding: 10px;
        display: flex;
        justify-content: center;
    }
}
</style>
